<template>
  <div class="vs_helptip">
    <el-tooltip
      ref="tooltip"
      v-model:visible="visible"
      placement="top"
      :effect="xvueTheme"
      :popper-class="`helptip_popup ${visualThemeClassName}`"
    >
      <template #content>
        <div
          class="tooltip_cont_wrap"
        >
          <div class="tooltip_cont" :style="contBoxStyle">
            <HelpManualSnippet
              v-if="tipKey"
              :snippet-key="tipKey"
              :isDiySnippet="isDiySnippet"
              @snippet-updated="updateTooltip"
            />
            <slot v-else></slot>
          </div>
        </div>
      </template>
      <slot name="rooter">
        <span>
          <el-icon v-if="icon_ === 'el-icon-setting'" @mouseenter="showTip()"><Setting /></el-icon>
          <el-icon v-else-if="icon_ === 'el-icon-question-filled'" @mouseenter="showTip()"><QuestionFilled /></el-icon>
          <el-icon v-else @mouseenter="showTip()"><InfoFilled /></el-icon>
        </span>
      </slot>
    </el-tooltip>
  </div>
</template>
<script>
import HelpManualSnippet from '@/components/common/help-manual/help-manual-snippet.vue';

export default {
  components: { HelpManualSnippet },
  props: {
    tipKey: String, // 帮助文档对应key，如 tooltip_vars.basic_pie
    icon: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'info',
    },
    hasLock: {
      type: Boolean,
      default: false,
    },
    isDiySnippet: { // 是否pulic/help_manual/diy_snippets下的片段
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      visible: false,
    };
  },
  computed: {
    icon_() {
      if (this.icon) {
        return this.icon;
      }
      if (this.type) {
        switch (this.type) {
          case 'info':
            return 'el-icon-info-filled';
          case 'question':
            return 'el-icon-question-filled';
          default:
            return 'el-icon-info-filled';
        }
      }
      return 'el-icon-info-filled';
    },
    contBoxStyle() {
      const style = {};
      if (this.width) {
        style.width = `${this.width}px`;
      }
      return style;
    },
  },
  watch: {},
  methods: {
    showTip() {
      this.visible = true;
    },
    updateTooltip() {
      this.$refs.tooltip.updatePopper();
    },
  },
};
</script>
<style lang="less" scoped>
.vs_helptip {
  display: inline-flex;
  color: #409eff;
  vertical-align: text-top;
  padding: 0 0 0 5px;
  :deep(.el-tooltip__trigger){
    display: flex;
    align-items: center;
  }
}
.tooltip_cont_wrap {
  position: relative;
  .lockTip {
    position: absolute;
    right: -14px;
    top: -15px;
    font-size: 12px;
    cursor: pointer;
    &.on {
      color: #409eff;
    }
  }
}
.tooltip_cont {
  max-height: 80vh;
  max-width: 60vw;
  overflow-y: auto;
  line-height: 1.4;
}
</style>
<style lang="less">
.visualComponents_body_theme_light {
  .tooltip_cont_wrap {
    .lockTip {
      color: #ccc;
    }
  }
}
.visualComponents_body_theme_dark {
  .tooltip_cont_wrap {
    .lockTip {
      color: #116584;
    }
  }
}
</style>
